<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <div class="container">
    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=1" alt="">
    </figure>
    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=2" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=3" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=4" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=5" alt="">
    </figure>

    <figure class="item">
      <img src="https://loremflickr.com/1024/860?random=5" alt="">
    </figure>
  </div>
</div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  .container {
    // 对应width
    inline-size: 800px;
    // 对应height
    block-size: 400px;

    display: grid;
    // 三列 列宽分别为 容器宽度 的 20% 50% 30%
    grid-template-columns: 20% 50% 30%;
    // 两行 行高为 容器高度的 50%
    grid-template-rows: repeat(2, 50%);

    outline: 1px dashed #f36;
    box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
    border-radius: 1px;
    margin-inline: auto;

    .item {
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
      border-radius: 2px;
      color: #000;
      padding: 4px;

      img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 3px;
        box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.25);
      }

      &:nth-child(1) {
        background-color: #f1c2c6;
      }
      &:nth-child(2n + 1) {
        background-color: #dac2f1;
      }
      &:nth-child(3n + 1) {
        background-color: #ccf1c2;
      }
      &:nth-child(4n + 1) {
        background-color: #c2e9f1;
      }
    }
  }
}
</style>
